<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('I/O details of standalone task')"
    width="800px"
    @close="store.hide()"
  >
    <el-card>
      <!-- Task class ID 行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="4">
          <label>{{ t('Task class ID:') }}</label>
        </el-col>
        <el-col :span="20">
          <el-text>{{ store.taskClassId }}</el-text>
        </el-col>
      </el-row>

      <!-- Task config 行 -->
      <el-row style="margin-bottom: 0;">
        <label>{{ t('Task config:') }}</label>
      </el-row>
      <el-row>
        <el-input
          v-model="store.taskConfig"
          type="textarea"
          :rows="8"
          readonly
          style="resize: none;"
          spellcheck="false"
        />
      </el-row>

      <!-- Task return value 行 -->
      <el-row style="margin-bottom: 0;">
        <label>{{ t('Task return value:') }}</label>
      </el-row>
      <el-row>
        <el-input
          v-model="store.taskReturnValue"
          type="textarea"
          :rows="8"
          readonly
          style="resize: none;"
          spellcheck="false"
        />
      </el-row>
    </el-card>

  </el-dialog>
</template>

<script setup>
import { useTaskDetailsStore } from '@/stores/taskDetails'
import { useLanguageStore } from '@/stores/language'

const store = useTaskDetailsStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'I/O details of standalone task': {
      'en': 'I/O details of standalone task',
      'zh': '独立任务详情'
    },
    'Task class ID:': {
      'en': 'Task class ID:',
      'zh': '任务组件ID：'
    },
    'Task config:': {
      'en': 'Task config:',
      'zh': '任务配置：'
    },
    'Task return value:': {
      'en': 'Task return value:',
      'zh': '任务返回值：'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script> 